<template>
	<view class="j-page">
		<view class="j-row" style="border: none;">
			<view class="j-label" style="font-size: 18px;">诉求登记</view>
		</view>
		<view class="j-row">
			<view class="j-label"><text class="j-required">*</text>学校名称</view>
			<view class="j-content">
				<text style="padding-left: 10px;">{{state.model.school_name}}</text>
			</view>
		</view>
		<view class="j-row">
			<view class="j-label"><text class="j-required">*</text>诉求人姓名</view>
			<view class="j-content">
				<uni-easyinput v-model="state.model.appeal_submitter" :input-border="false" :maxlength="30" :clearable="false"
					placeholder="请输入姓名"></uni-easyinput>
				<view class="j-error-message" v-if="state.showErrorMessage && isEmpty(state.model.appeal_submitter)">请输入姓名
				</view>
			</view>
		</view>
		<view class="j-row">
			<view class="j-label"><text class="j-required">*</text>联系方式</view>
			<view class="j-content">
				<uni-easyinput v-model="state.model.contact_way" :input-border="false" :maxlength="11" :clearable="false"
					placeholder="请输入联系方式"></uni-easyinput>
				<view class="j-error-message" v-if="state.showErrorMessage && isEmpty(state.model.contact_way)">请输入手机号码
				</view>
				<view class="j-error-message" v-if="state.showErrorMessage && !isPhoneNum(state.model.contact_way)">输入的手机号码无效
				</view>
			</view>
		</view>
		<view class="j-row" style="align-items: flex-start;">
			<view class="j-label" style="padding-top: 6px;"><text class="j-required">*</text>事件描述</view>
			<view class="j-content">
				<uni-easyinput type="textarea" v-model="state.model.appeal_desc" :input-border="false" :maxlength="400"
					:clearable="false" placeholder="请填写事件描述" style="padding-left: 10px;"></uni-easyinput>
				<view class="j-error-message" v-if="state.showErrorMessage && isEmpty(state.model.appeal_desc)">请填写事件描述</view>
			</view>
		</view>
		<view class="j-row" style="border: none;">
			<button class="j-btn-commit" @click="showCommitPopup()">提交</button>
		</view>
		<!-- 		<view>
			{{state}}
		</view> -->

		<uni-popup ref="popupRef" type="center">
			<view class="custom-popup">
				<image :src="state.captcha_base64_image" mode="widthFix" class="popup-image" @click="getCaptcha" />
				<view class="popup-content">
					<text>验证码：</text>
					<uni-easyinput v-model="state.model.captcha" placeholder="请输入验证码" maxlength="10"></uni-easyinput>
				</view>
				<view style="display: flex;justify-content: center;gap: 20px;">
					<button type="default" @click="closePopup" class="popup-button">取消</button>
					<button type="primary" @click="confirmPopup" class="popup-button">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	import config from '@/jk/config.js'

	const popupRef = ref(null);

	const state = reactive({
		model: {
			school_name: '无锡行知科技学校',
			appeal_submitter: '',
			contact_way: '',
			appeal_desc: '',

			captcha_key: '',
			captcha: '',
		},

		showErrorMessage: false,
	})

	const isEmpty = (value) => {
		if ((value || '').trim().length === 0) {
			return true;
		} else {
			return false;
		}
	}

	const isPhoneNum = (value, emptyNoCheck = true) => {

		if (isEmpty(value)) {
			return emptyNoCheck;
		}

		const regex = /^1[3-9]\d{9}$/;
		return regex.test((value || '').trim());
	}

	const validate = () => {
		return !isEmpty(state.model.appeal_submitter) &&
			!isEmpty(state.model.appeal_desc) &&
			!isEmpty(state.model.contact_way) && isPhoneNum(state.model.contact_way);
	}

	const getCaptcha = async () => {

		uni.request({
			method: 'POST',
			url: `${config.rootUrl}/wuxixz/appeal/captcha/create`,
			data: {},
			header: {},
			success: (res) => {
				res = res.data;

				console.log(44, res)

				if (res.code === 0) {
					state.model.captcha_key = res.result.key;
					state.captcha_base64_image = res.result.base64_image;
					popupRef.value.open();
				} else {
					uni.showModal({
						title: '错误',
						content: `获取验证码错误：${res.message || res.error || '系统忙'}`,
						showCancel: false,
					})
				}

			},
			fail: (err) => {
				console.log(err);
				uni.showModal({
					title: '错误',
					content: `获取验证码错误：${err.message}.`,
					showCancel: false,
				})
			},
			complete() {
				uni.hideLoading();
			}
		});
	}

	const showCommitPopup = () => {
		if (validate()) {
			getCaptcha();
		} else {
			state.showErrorMessage = true;
		}
	}
	const closePopup = () => {
		popupRef.value.close();
	}

	const confirmPopup = () => {
		if (state.model.captcha.trim().length === 0) {
			uni.showToast({
				icon: 'error',
				title: '请输入验证码'
			})
		} else {
			commit();
		}
	}

	const commit = () => {

		uni.request({
			method: 'POST',
			url: `${config.rootUrl}/wuxixz/appeal/commit`,
			data: {
				...state.model
			},
			header: {},
			success: (res) => {
				res = res.data;

				// console.log(44, res)

				if (res.code === 0) {
					
					closePopup();

					uni.showModal({
						title: '信息',
						content: '您的诉求已登记，我们会尽快联系您',
						showCancel: false,
						success() {
							state.model = {
								school_name: '无锡行知科技学校',
								appeal_submitter: '',
								contact_way: '',
								appeal_desc: '',
								
								captcha_key:'',
								captcha:'',
							}
						}
					})
				} else {
					uni.showModal({
						title: '错误',
						content: `提交失败：${res.message || res.error || '系统忙'}`,
						showCancel: false,
					})
				}

			},
			fail: (err) => {
				console.log(err);
				uni.showModal({
					title: '错误',
					content: `提交失败：${err.message}.`,
					showCancel: false,
				})
			},
			complete() {
				uni.hideLoading();
			}
		});

	}

	const handleCommit = () => {
		if (validate()) {
			uni.showModal({
				title: '请确认',
				content: '是否确认提交？',
				showCancel: true,
				success(res) {
					if (res.confirm) {
						// console.log({
						// 	res
						// })

						uni.request({
							method: 'POST',
							url: `${config.rootUrl}/wuxixz/appeal/commit`,
							data: {
								...state.model
							},
							header: {},
							success: (res) => {
								res = res.data;

								// console.log(44, res)

								if (res.code === 0) {

									uni.showModal({
										title: '信息',
										content: '您的诉求已登记，我们会尽快联系您',
										showCancel: false,
										success() {
											state.model = {
												school_name: '无锡行知科技学校',
												appeal_submitter: '',
												contact_way: '',
												appeal_desc: '',
											}
										}
									})
								} else {
									uni.showModal({
										title: '错误',
										content: `提交失败：${res.message || res.error || '系统忙'}`,
										showCancel: false,
									})
								}

							},
							fail: (err) => {
								console.log(err);
								uni.showModal({
									title: '错误',
									content: `提交失败：${err.message}.`,
									showCancel: false,
								})
							},
							complete() {
								uni.hideLoading();
							}
						});

					}
				}
			})
		} else {
			state.showErrorMessage = true;
		}
	}
</script>

<style>
	/* 设置页面宽度与移动端一致 */
	body {
		background-color: white;

		margin: 0 auto;
		padding: 0;
		width: 100%;
		min-width: 320px;
		width: 750rpx;
		overflow-x: hidden;

		border: 1px solid #e8e8e8;
		box-sizing: border-box;
	}

	/* 使用rem单位 */
	html {
		font-size: 16px;
	}

	.j-page {
		background-color: white;
		padding: 20rpx 20rpx;
		width: 100%;
	}

	.j-row {
		padding: 20rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20rpx;

		border-bottom: 1px solid #e8e8e8;
	}

	.j-label {
		color: grey;
		width: 200rpx;
	}

	.j-required {
		color: red;
		margin-right: 4rpx;
	}

	.j-non-required {
		color: transparent;
		margin-right: 4rpx;
	}

	.j-content {
		flex-grow: 1;
	}

	.j-btn-commit {
		width: 90%;
		color: white;
		background-color: #07c160;
		border-color: #07c160;
	}

	.j-btn-commit:hover {
		background-color: #13d613
	}

	.j-error-message {
		color: red;
		padding-left: 10px;
	}

	/* 	uni-textarea {
		padding-left: 10px !important;
	} */

	.uni-easyinput__placeholder-class {
		font-size: 16px !important;
	}


	.custom-popup {
		width: 650rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.popup-content {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.popup-button {
		/* width: 100%; */
		/* background: #007AFF; */
		/* color: #fff; */
		font-size: 17px;
		padding-left: 20px;
		padding-right: 20px;
	}
</style>